<template>
  <div class="page">
    <van-nav-bar
      title="存奶详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />


    <van-loading v-if="pageLoading" class="loading" type="spinner" color="#1989fa">加载中...</van-loading>

    <van-cell v-else class="list_div">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="line_div">
          <van-cell>
            <span class="title">存奶编号:&nbsp;</span> <span class="content"> {{ milkInfo.id }}</span>
          </van-cell>
          <van-cell>
            <span class="title">存奶状态:&nbsp;</span>
            <van-tag v-if="milkInfo.milkStatus === 1" type="success ">正常</van-tag>
            <van-tag v-else-if="milkInfo.milkStatus === 2" type="warning">临期</van-tag>
            <van-tag v-else-if="milkInfo.milkStatus === 3" type="danger">过期</van-tag>
            <van-tag v-else-if="milkInfo.milkStatus === 4" type="primary">已用完</van-tag>
          </van-cell>
        </div>
        <div class="line_div">
          <van-cell>
            <span class="title">总容量:&nbsp;</span> <span class="content"> {{ milkInfo.totalCapacity }} 毫升</span>
          </van-cell>
          <van-cell>
            <span class="title">已使用:&nbsp;</span> <span class="content"> {{ milkInfo.useCapacity }} 毫升</span>
          </van-cell>
        </div>
        <van-cell>
          <span class="title">剩余容量：:&nbsp;</span> <span class="content"> {{ milkInfo.capacity }} 毫升</span>
        </van-cell>

        <van-cell>
          <span class="title">储存天数:&nbsp;</span> <span class="content"> {{ milkInfo.remainingDays }} 天</span>
        </van-cell>

        <!-- <van-divider content-position="left">存奶记录</van-divider> -->
        <van-tabs v-model="active" color="#1989fa">
          <van-tab title="存奶记录" />
          <van-tab title="" disabled />
          <van-tab title="" disabled />
        </van-tabs>

        <div class="step_div">
          <van-steps direction="vertical" :active="0">
            <van-step v-for="logs in milkLogList" :key="logs.id">
              <h4>
                <span v-if="logs.operStatus === 1">
                  {{ logs.userName }}存入{{ logs.useCapacity }}毫升
                  <van-tag type="success ">存入</van-tag>
                </span>
                <span v-if="logs.operStatus === 2">
                  {{ logs.userName }}使用{{ logs.useCapacity }}毫升
                  <van-tag type="primary ">使用</van-tag>
                </span>
                <span v-if="logs.operStatus === 3">
                  当前存奶已过期
                  <van-tag type="warning ">过期</van-tag>
                </span>
                <span v-if="logs.operStatus === 4">
                  存奶已删除
                  <van-tag type="danger ">删除</van-tag>
                </span>
              </h4>
              <p>{{ logs.createDatetime }}</p>
            </van-step>
          </van-steps>
        </div>
      </van-pull-refresh>
    </van-cell>
    <div v-if="milkInfo.milkStatus != 4" class="footBar">
      <van-button round class="footBtn" @click="showUseMilkFun()">使用存奶</van-button>
    </div>

    <van-dialog
      v-model="showUseMilk"
      title="使用存奶"
      show-cancel-button
      :before-close="beforeClose"
      @confirm="useMilk"
      @cancel="showUseMilk = false"
    >
      <van-cell-group>
        <van-field v-model="milkInfo.capacityShow" readonly is-link label="使用容量" placeholder="请选择容量" @click="openMlChoose()" />
      </van-cell-group>
    </van-dialog>

    <van-popup v-model="showMilkMLPicker" position="bottom" :style="{ height: '30%' }">
      <van-picker
        title="存奶容量"
        show-toolbar
        :default-index="indexML"
        :columns="milkCapacityList"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getMilkInfoById, useMilk } from '@/api/milk.js'
export default {
  name: 'MilkDetail',
  data: function() {
    return {
      msg: '主页',
      dialogTitle: '',
      pageLoading: true,
      list: [],
      key: '',
      currentPage: 1,
      total: 20,
      isLoading: false,
      refreshing: false,
      milkInfo: {},
      milkLogList: [],
      milkId: this.$route.query.id,
      active: 0,
      minML: 10,
      maxML: 240,
      indexML: 9,
      milkCapacityList: [],
      showUseMilk: false,
      capacityShow: false,
      showMilkMLPicker: false
    }
  },
  // 进入页面前执行的钩子函数
  mounted() {
    console.log('存奶id', this.milkId)
    const params = {
      id: this.milkId
    }
    getMilkInfoById(params).then((res) => {
      const milkInfo = res.data.milkInfo
      this.milkInfo = milkInfo
      this.milkLogList = res.data.logList
      this.maxML = milkInfo.capacity
      console.log(this.milkInfo)
      console.log(this.milkLogList)
      this.pageLoading = false
    })
  },
  methods: {
    // 点击顶部导航栏左侧
    onClickLeft() {
      this.$router.push('/milk/index')
    },
    // 弹窗关闭前调用方法
    beforeClose(action, done) {
      done(false)
    },
    // 刷新列表
    onRefresh() {
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      const params = {
        id: this.milkId
      }
      getMilkInfoById(params).then((res) => {
        this.milkInfo = res.data.milkInfo
        this.milkLogList = res.data.logList
        this.maxML = this.milkInfo.capacity
        // console.log(this.milkInfo)
        // console.log(this.milkLogList)
        this.isLoading = false
      })
    },
    // 用奶弹窗
    showUseMilkFun() {
      this.showUseMilk = true
    },
    // 存奶容量弹窗方法
    openMlChoose() {
      this.milkCapacityList = []
      // 初始化选择列表
      for (let i = this.minML; i <= this.maxML; i += 10) {
        // console.log({ text: `${i}毫升`, value: i, disabled: false })
        this.milkCapacityList.push({ text: `${i}毫升`, value: i, disabled: false })
      }
      if (this.showUseMilk) {
        this.indexML = this.milkCapacityList.length - 1
      }
      // console.log(this.milkCapacityList)
      this.showMilkMLPicker = true
    },
    useMilk() {
      if (!this.milkInfo.capacityChoose) {
        Toast('请先选择使用容量')
        return
      }
      const params = {
        id: this.milkInfo.id,
        capacity: this.milkInfo.capacityChoose
      }
      console.log('用后', params)
      useMilk(params).then((res) => {
        Toast('使用成功')
        this.milkInfo = {}
        // 关闭弹窗
        this.showUseMilk = false
        // 刷新列表
        this.loading = true
        this.onRefresh()
      })
    },
    onConfirm(value, index) {
      // console.log(`当前值：${value.value}, 当前索引：${index}`)
      this.milkInfo.capacityChoose = value.value
      this.milkInfo.capacityShow = value.text
      this.showMilkMLPicker = false
    },
    onCancel() {
      // console.log('取消')
      this.showMilkMLPicker = false
    }

  }
}

</script>

    <style scoped>
.line_div {
  display: flex;
}
.list_div {
  height: 300vh;
}
.step_div {
  height: 80vh;
}
.title {
  line-height: 24px;
  font-size: 14px;
  font-weight: 600;
}
.content {
  font-size: 14px;
}
.actionDiv:active {
  background-color: rgb(229, 229, 229);
}
.actionDiv:focus {
  background-color: rgb(229, 229, 229);
}
.loading {
  height: 90vh;
  justify-content: center;
}
.footBar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 5px 0 5px 0;
  background-color: white;
  border-top: .5px solid #CECECE;
}
.footBtn {
  width: 80%;
  margin: 7px 0 5px 0px;
  background-color: #07C160;
  color: white;
}
    </style>

